<template>
  <view class="page">
    <nav-bar>
      <template #title>图形绘制</template>
    </nav-bar>
    <view class="container">
      <RmRegionImg
        :lines="lines"
        :markers="markers"
        :imgConfig="imgConfig"
      ></RmRegionImg>
    </view>
  </view>
</template>

<script lang="ts" setup>
import RmRegionImg from "@/components/rm-regionImg/rm-regionImg";

const imgConfig = ref({
  url: "https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/gfy/gy.png",
  width: 1235,
  height: 737,
});

const markers = ref([
  {
    id: 1,
    labels: ["设备名称:工业篮球场", "使用时间:2025年6月"],
    coorX: 336.609908,
    coorY: 737 - 401.041064,
    iconSize: 15,
    className: "flicker",
    iconUrl:
      "https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png",
  },
  {
    id: 2,
    labels: ["设备名称:北门摄像头", "设备编号:5b890b1aa6daa6dd"],
    coorX: 436.053212,
    coorY: 737 - 559.018306,
    iconSize: 16,
    iconUrl: "/static/img/camera.png",
  },
  {
    id: 3,
    labels: ["设备名称:南门摄像头", "设备编号:5b890b1aa6daa6dd"],
    coorX: 707.609929,
    coorY: 737 - 101.64871,
    iconSize: 16,
    iconUrl:
      "https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/gfy/lookYou.png",
  },
  {
    id: 4,
    labels: ["地点名称:桃李园餐厅"],
    coorX: 706.335015,
    coorY: 737 - 333.518533,
    iconSize: 16,
    iconUrl:
      "https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png",
  },
  {
    id: 5,
    labels: ["设备名称:南门摄像头", "设备编号:5b890b1aa6daa6dd"],
    coorX: 462.82641,
    coorY: 737 - 294.024222,
    iconSize: 16,
    iconUrl:
      "https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png",
  },
  {
    id: 6,
    labels: ["设备名称:南门摄像头", "设备编号:5b890b1aa6daa6dd"],
    coorX: 942.194135,
    coorY: 737 - 483.851715,
    iconSize: 16,
    iconUrl:
      "https://web-mobin-test-study.oss-cn-shenzhen.aliyuncs.com/%E5%BC%A0%E8%80%81%E5%B8%88%E5%A4%A7%E5%B1%8F/%E6%8A%A5%E8%AD%A6%E7%81%AF3.png",
  },
]);

const lines = ref([
  {
    type: "Polygon",
    lineList: [
      { coorX: 220.592719, coorY: 737 - 590.868556 },
      { coorX: 243.541174, coorY: 737 - 83.81257 },
      { coorX: 1060.761152, coorY: 737 - 116.93683 },
      { coorX: 1064.585894, coorY: 737 - 598.512617 },
      { coorX: 220.592719, coorY: 737 - 590.868556 },
    ],
    style: {
      color: "#3388ff",
      fillColor: "#3388ff",
      fillOpacity: 0.2,
      fill: false,
      width: 3,
    },
  },
  {
    type: "Polygon",
    lineList: [
      { coorX: 272.864199, coorY: 737 - 472.385625 },
      { coorX: 267.764543, coorY: 737 - 319.504423 },
      { coorX: 414.379672, coorY: 737 - 324.600463 },
      { coorX: 415.654586, coorY: 737 - 481.303695 },
      { coorX: 272.864199, coorY: 737 - 472.385625 },
    ],
    style: {
      color: "#16DD20",
      fillColor: "#16DD20",
      fillOpacity: 0.2,
      fill: true,
      width: 2,
    },
  },
  {
    type: "Polygon",
    lineList: [
      { coorX: 483.225036, coorY: 737 - 543.730186 },
      { coorX: 484.49995, coorY: 737 - 402.315074 },
      { coorX: 671.912332, coorY: 737 - 404.863094 },
      { coorX: 677.011989, coorY: 737 - 553.922266 },
      { coorX: 483.225036, coorY: 737 - 543.730186 },
    ],
    style: {
      color: "#3388ff",
      fillColor: "#3388ff",
      fillOpacity: 0.2,
      fill: true,
      width: 2,
    },
  },
  {
    type: "Polygon",
    lineList: [
      { coorX: 256.290315, coorY: 737 - 262.173972 },
      { coorX: 261.389972, coorY: 737 - 105.47074 },
      { coorX: 410.554929, coorY: 737 - 111.84079 },
      { coorX: 409.280015, coorY: 737 - 265.996002 },
      { coorX: 256.290315, coorY: 737 - 262.173972 },
    ],
    style: {
      color: "#B3D020",
      fillColor: "#B3D020",
      fillOpacity: 0.2,
      fill: true,
      width: 2,
    },
  },
  {
    type: "Polygon",
    lineList: [
      { coorX: 739.482783, coorY: 737 - 547.552216 },
      { coorX: 733.108212, coorY: 737 - 402.315074 },
      { coorX: 893.747397, coorY: 737 - 402.315074 },
      { coorX: 886.097912, coorY: 737 - 551.374246 },
      { coorX: 739.482783, coorY: 737 - 547.552216 },
    ],
    style: {
      color: "#DF1FE2",
      fillColor: "#DF1FE2",
      fillOpacity: 0.2,
      fill: true,
      width: 2,
    },
  },
  {
    type: "Polygon",
    lineList: [
      { coorX: 733.108212, coorY: 737 - 313.134373 },
      { coorX: 731.833298, coorY: 737 - 122.03287 },
      { coorX: 883.548083, coorY: 737 - 128.40292 },
      { coorX: 880.998255, coorY: 737 - 323.326453 },
      { coorX: 733.108212, coorY: 737 - 313.134373 },
    ],
    style: {
      color: "#0EBBEB",
      fillColor: "#0EBBEB",
      fillOpacity: 0.2,
      fill: true,
      width: 2,
    },
  },
  {
    type: "Polygon",
    lineList: [
      { coorX: 430.953556, coorY: 737 - 251.981892 },
      { coorX: 433.503384, coorY: 737 - 123.30688 },
      { coorX: 677.011989, coorY: 737 - 124.58089 },
      { coorX: 674.462161, coorY: 737 - 282.558132 },
      { coorX: 430.953556, coorY: 737 - 251.981892 },
    ],
    style: {
      color: "#C20664",
      fillColor: "#C20664",
      fillOpacity: 0.2,
      fill: true,
      width: 2,
    },
  },
]);
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 46px);
}
</style>